﻿// contntesManager
(function ($, undefined) {

    // define the name of the UI component
    var ui_name = "formDialog"

    // initialize object
    var fd = $.formDialog = {
        // default values
        defaults: {
    },

    setDefaults: function (defaultOptions) {
        this.defaults = $.extend({}, this.defaults, defaultOptions);
    }
};

$.fn.formDialog = function (options) {

    // method calling
    if (typeof options == 'string') {
        var args = Array.prototype.slice.call(arguments, 1),
			    res;
        this.each(function () {
            var data = $.data(this, ui_name);
            if (data) {
                var meth = data[options];
                if (meth) {
                    var r = meth.apply(this, args);
                    if (res === undefined) {
                        res = r;
                    }
                }
            }
        });
        if (res !== undefined) {
            return res;
        }
        return this;
    }

    // initialize options
    options = $.extend({}, fd.defaults, options);

    this.each(function () {
        var _self = this;
        var container = $(this).find('.active-container');

        if (_self) {
            updateData();
            initializeDom();
        }

        // initialize callback
        for (var key in options) {
            var value = options[key];
            if (typeof value == 'function') {
                // bind callbacks
                $(_self).bind(key, value);
            }
        }

        /* Private Methods
        -----------------------------------------------------------------------------*/
        // 初始化Dom数据
        function initializeDom() {

            $(container).each(function () {
                var _self = $(this);
                var input = $(this).find('.active-input');
                var selector = $(this).find('.selector');

                var getCurrentStatus = function () {
                    return _self.data('edit-status');
                };


                var statusChangeMatrix = { 'editing': {}, 'normal': {}, 'active': {} };

                statusChangeMatrix.normal.active = function () {
                    _self.css({ 'background-color': "#eee" });
                    input.css({
                        'border-color': "#999",
                        'background-color': "white"
                    });
                };

                statusChangeMatrix.active.normal = function () {
                    _self.css({ 'background-color': "#e5e5e5" });
                    input.css({
                        'border-color': "transparent",
                        'background-color': "transparent"
                    });
                };

                statusChangeMatrix.active.editing = statusChangeMatrix.active.editing = function () {
                    input.data('tempVal', input.val());
                    input.css({
                        'border-color': "red",
                        'background-color': "white"
                    });

                    setIsOnDataReady();
                };

                statusChangeMatrix.editing.normal = function () {
                    _self.css({ 'background-color': "#e5e5e5" });
                    input.css({
                        'border-color': "transparent",
                        'background-color': "transparent"
                    });

                    setIsOnDataReady();
                };

                statusChangeMatrix.normal.editing = function () {
                    _self.css({ 'background-color': "transparent" });
                    input.css({
                        'border-color': "red",
                        'background-color': "white"
                    });

                    setIsOnDataReady();
                };


                var setCurrentStatus = function (status) {
                    var originalStatus = _self.data('edit-status');
                    _self.data('edit-status', status);

                    var operations = statusChangeMatrix[originalStatus][status];
                    if (operations) {
                        operations();
                    }

                };

                _self.data('edit-status', 'normal');
                _self.data('isDataReady', false);

                _self.hover(function () {
                    if (getCurrentStatus() == 'normal') {
                        setCurrentStatus('active');
                    }
                }, function () {
                    if (getCurrentStatus() == 'active') {
                        setCurrentStatus('normal');
                    }
                });

                input.hover(function () {
                    if (getCurrentStatus() == 'normal') {
                        setCurrentStatus('active');
                    }
                }, function () {
                    if (getCurrentStatus() == 'active') {
                        setCurrentStatus('normal');
                    }
                });

                input.focusin(function () {
                    if (getCurrentStatus() == 'active') {
                        setCurrentStatus('editing');
                    }
                    if (getCurrentStatus() == 'normal') {
                        setCurrentStatus('editing');
                    }

                }).focusout(function () {
                    if (getCurrentStatus() == 'editing') {
                        setCurrentStatus('normal');
                    }
                }).keydown(function (e) {
                    if (e.keyCode == 13) {  // 按下回车
                        input.blur().focusout();
                    }
                    if (e.keyCode == 27) {  // 按下ESC
                        input.val(input.data('tempVal'));
                        input.blur().focusout();
                    }
                });

                selector.change(setIsOnDataReady);
            });
        };

        function setIsOnDataReady() {
            //修改过
            var isChanged = false;
            $(container).each(function () {
                var _self = $(this);
                var input = $(this).find('.active-input');
                var selector = $(this).find('.selector');

                if (input.length == 1 && _self.data('resetData') != input.val()) {
                    isChanged = true;
                }
                if (selector.length == 1 && _self.data('resetData') != selector.val()) {
                    isChanged = true;
                }
            });

            //正在编辑
            var isEditing = false;
            $(container).each(function () {
                var _self = $(this);
                if (_self.data('edit-status') == 'editing') {
                    isEditing = true;
                }
            });

            var oldDataReady = $(_self).data('isDataReady');
            var isOnDataReady = isChanged && !isEditing;

            if (isOnDataReady != oldDataReady) {
                onDataReady(isOnDataReady);
                $(_self).data('isDataReady', isOnDataReady);
            }
            return isOnDataReady;
        }

        function updateData() {
            $(container).each(function () {
                var _self = $(this);
                var input = $(this).find('.active-input');
                var selector = $(this).find('.selector');

                if (input.length > 0) {
                    _self.data('resetData', input.val());
                }
                if (selector.length > 0) {
                    _self.data('resetData', selector.val());
                }
            });
            resetData();
        }

        function resetData() {
            $(container).each(function () {
                var _self = $(this);
                var input = $(this).find('.active-input');
                var selector = $(this).find('.selector');

                if (input.length > 0) {
                    input.val(
                        _self.data('resetData')
                    );
                }
                if (selector.length > 0) {
                    selector.val(
                        _self.data('resetData')
                    );
                }
            });

            setIsOnDataReady();
        }


        /* Callback Triggers
        -----------------------------------------------------------------------------*/
        function onDataReady(isOnDataReady) {
            $(_self).trigger('onDataReady', isOnDataReady);
        };


        /* Public Methods
        -----------------------------------------------------------------------------*/

        var publicMethods = {
            'updateData': updateData,
            'resetData': resetData
            // @other public methods
        };

        $.data(this, ui_name, publicMethods);


        // @private methods


        // define callback triggers

        //function select() {
        //    var val = 12345;
        //    $(_self).trigger('select', val);
        //}

    });

    return this;
};
// @static methods

})(jQuery);